<script setup lang="ts">
import { Aim } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { onMessage, sendMessage } from 'webext-bridge'


const text = ref("text")
const path = ref("path")

async function myClick() {
  const res = await sendMessage('get-selection', {}, 'content-script@' + chrome.devtools.inspectedWindow.tabId)
  console.log("res: " + res)

  onMessage('choice', (message) => {
    const { data } = message
    console.log(message)
    text.value = data.text
    path.value = data.path
    return {
      'success': true
    }
  })
}


function copyText() { // text: 要复制的内容， callback: 回调
  var tag = document.createElement('input');
  tag.setAttribute('id', 'cp_hgz_input');
  tag.value = path.value;
  document.getElementsByTagName('body')[0].appendChild(tag);
  document.getElementById('cp_hgz_input').select();
  document.execCommand('copy');
  document.getElementById('cp_hgz_input').remove();
  ElMessage({
    message: '复制成功',
    type: 'success',
  })
}

</script>

<template>
  <el-container>
    <el-header>
      <el-row justify="space-between">
        <el-col :span="1">
          <!-- <el-icon>
            <user />
          </el-icon>-->
        </el-col>
        <el-col :span="1">
          <div class="flex flex-row-reverse">
            <el-tooltip class="item" content="Bottom Center prompts info" placement="bottom">
              <el-icon @click="myClick">
                <aim style="width: 2em; height: 2em;" />
              </el-icon>
            </el-tooltip>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-card shadow="always">
        <el-button @click="copyText">Copy</el-button>
      </el-card>
      <el-card shadow="always">{{ text }}</el-card>
      <el-card shadow="always">{{ path }}</el-card>
    </el-main>
  </el-container>
</template>

